<!--
 * @Author: yanjikun
 * @Date: 2022-02-17 16:20:55
 * @LastEditors: yanjikun
 * @LastEditTime: 2022-05-05 16:42:49
 * @Description: file content
-->
<template>
  <Col v-if="showActionButtonGroup" v-bind="actionColOption">
    <div style="width: 100%">
      <Form.Item>
        <Space>
          <slot name="resetBefore"></slot>
          <Button
            type="default"
            v-bind="getResetButtonOptions"
            v-if="showResetButton"
            @click="resetFields"
          >
            {{ getResetButtonOptions.text }}
          </Button>
          <slot name="submitBefore"></slot>
          <Button
            type="primary"
            v-bind="getSubmitButtonOptions"
            v-if="showSubmitButton"
            @click="handleSubmit"
          >
            {{ getSubmitButtonOptions.text }}
          </Button>
          <slot name="advanceBefore"></slot>
          <Button type="link" size="small" v-if="showAdvancedButton">
            {{ isAdvanced ? '展开' : '收起' }}
          </Button>
          <slot name="advanceAfter"></slot>
        </Space>
      </Form.Item>
    </div>
  </Col>
</template>

<script setup lang="ts">
  import { Col, Button, Form, Space } from 'ant-design-vue'
  import { ButtonOptions, formActionProps } from '../types/formAction'
  import { useFormContext } from '../hooks/useFormContext'
  import { ColEx } from '../..'
  import { computed } from 'vue'
  defineOptions({
    name: 'FormAction',
  })
  const props = defineProps(formActionProps)
  const { resetFields, handleSubmit } = useFormContext()
  const getResetButtonOptions = computed((): ButtonOptions => {
    return Object.assign({ text: '重置' }, props.resetButtonOptions)
  })
  const getSubmitButtonOptions = computed((): ButtonOptions => {
    return Object.assign({ text: '查询' }, props.submitButtonOptions)
  })
  /**获取操作项Col配置 */
  const actionColOption = computed(() => {
    const { showAdvancedButton, actionSpan: span, actionColOptions } = props
    const actionSpan = 24 - span
    const advancedSpanObj = showAdvancedButton ? { span: actionSpan < 6 ? 24 : actionSpan } : {}
    const actionColOpt: Partial<ColEx> = {
      style: { textAlign: 'right' },
      span: showAdvancedButton ? 6 : 4,
      ...advancedSpanObj,
      ...actionColOptions,
    }
    return actionColOpt
  })
</script>

<style scoped lang="less"></style>
